<template>
  <div class="recharge">
    <h4>设备异常信息</h4>
    <!-- <el-row> -->
    <div class="grid_title">
      <div class="grid-time">
        <div class="title_right">
          <div class="error">
            <div class="error_title">已登记设备数量</div>
            <div class="error_content">{{incomeList.total}}</div>
          </div>
          <div class="error">
            <div class="error_title">设备在线数量</div>
            <div class="error_content">{{incomeList.onlineNum}}</div>
          </div>
        </div>
      </div>
    </div>
    <el-row :gutter="8">
      <el-table
        :data="exceptionList"
        style="width:100%"
        border="border"
        highlight-current-row
        height="28vh"
      >
        <el-table-column prop="unitName" label="学校名称" v-if="unitType == 50"></el-table-column>
        <el-table-column prop="terminalName" label="设备名称"></el-table-column>
        <el-table-column prop="terminalCode" label="设备编号"></el-table-column>
        <el-table-column prop="roomName" label="房间名称"></el-table-column>
        <el-table-column prop="terminalType" label="设备类型">
            <template slot-scope="scope">
                {{scope.row.terminalType | terminalTypeOption}}
            </template>
        </el-table-column>
        <el-table-column prop="terminalModel" label="设备型号">
              <template slot-scope="scope">
                {{scope.row.terminalModel | terminalModelOption}}
            </template>
        </el-table-column>
      </el-table>

    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 设备异常列表
      exceptionList: [],
      // 设备异常信息
      incomeList: {},
    };
  },
  props:['unitType'],
  created() {
    this.getTotal();
    this.getRecharge();
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid;
      },
    },
  },
  methods: {
    // 获取设备异常信息
    getTotal() {
      this.$http({
        url: this.$http.adornUrl("/info/terminal/state-statistics"),
        method: "post",
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
        }),
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          if (data.messageContent.length != 0) {
            this.incomeList = data.messageContent;
          }
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    // 获取异常列表
    getRecharge() {
      this.$http({
        url: this.$http.adornUrl("/info/terminal/error-list"),
        method: "post",
        data: this.$http.adornData({
          messageContent: this.changeschoolid,
        }),
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          if (data.messageContent.length != 0) {
            this.exceptionList = data.messageContent;
          }
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.recharge {
  overflow: hidden;
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .grid_title {
    padding: 1vh;
    padding-bottom: 0.1vh;
    overflow: hidden;
  }
  .title_size {
    font-size: 12px;
    font-weight: 600;
  }
  .grud_data.data_size {
    font-size: 13px;
    font-weight: 500;
  }
  h1 {
    margin: 0;
    font-size: 2vh;
  }
  h4 {
    margin: 0;
    padding-top: 0.8vh;
    padding-left: 0.8vw;
  }
  .grid-time {
    box-shadow: 0 0 10px #ddd;
    // background-color:#f5f5f5;
    height: 7vh;
    padding: 1vh;
    border-radius: 4px;
    .title_right {
      display: flex;
      .error {
        flex: 1;
        height: 7vh;
        .error_title {
          font-size: 1.2vh;
          font-weight: 700;
        }
        .error_content {
          font-size: 2vh;
          font-weight: 700;
        }
      }
      font-size: 12px;
    }
    span {
      // color: #ccc;
      font-size: 12px;
      margin-left: 1vw;
    }
  }
}
.el-row {
  padding: 1vh 1.3vh;
  // padding-top: 0;
  font-weight: 1000;
  &:first-child {
    margin-top: 0;
  }
}
</style>